<template>
  <div class="dashboard-container">
    <div class="app-container">
      <el-card>
        <el-row>
          <el-col :span="6">
            <el-input v-model="queryInfo.title" placeholder="搜索"></el-input>
          </el-col>
          <el-col :span="2">
            <el-button size="small" type="primary" icon="el-icon-search" @click="getLimit">搜索</el-button>
          </el-col>
          <el-col :span="2"><el-button size="small" type="primary" @click="reseet">重置</el-button></el-col>
        </el-row>
        <el-row>
          <el-col>
            <el-button size="mini" type="primary" icon="el-icon-edit" class="ss" @click="addLimit">新增权限组</el-button>
          </el-col>
        </el-row>
        <!-- 消息警示 -->
        <el-alert
    :title="`共${total}条记录`"
    type="info"
    show-icon
    class="sb"
    >
  </el-alert>
  <!-- 表格 -->
  <el-table
      :data="Limit"
      style="width: 100%">
      <el-table-column type = "index">
</el-table-column>
      <el-table-column prop="title" label="用户名"></el-table-column>
      <el-table-column prop="create_date" label="日期">
        <template slot-scope="scope">
          {{scope.row.create_date | parseTime}}
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button size="small" type="primary" @click="editlimit(scope.row)">编辑</el-button>
          <el-button size="small" type="danger" @click="deleteLimit(scope.row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="queryInfo.page"
      :page-sizes="[1,2,5,10]"
      :page-size="queryInfo.pagesize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total">
    </el-pagination>
    <!-- 添加 -->
    <el-dialog
  title="创建权限组"
  :visible.sync="adddialogVisible"
  width="55%">
 <el-form ref="form" :model="addform" label-width="80px">
  <el-form-item label="用户名">
    <el-input v-model="addform.title"></el-input>
  </el-form-item>
  <!-- 树形控件 -->
  <el-form-item label="权限分配">
    <el-tree :data="distribute"
    :props="treeProps"
    show-checkbox
    node-key="id"
    ref = "treeRef"
    >
    </el-tree>
  </el-form-item>
 </el-form>
  <span slot="footer" class="dialog-footer">
    <el-button @click="adddialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="sureLimit">确 定</el-button>
  </span>
</el-dialog>
    <!-- 编辑 -->
    <el-dialog
  title="编辑权限组"
  :visible.sync="editdialogVisible"
  width="55%">
 <el-form ref="form" :model="editform" label-width="80px">
  <el-form-item label="用户名">
    <el-input v-model="editform.title"></el-input>
  </el-form-item>
  <!-- 树形控件 -->
  <el-form-item label="权限分配">
    <el-tree :data="distribute"
    :props="treeProps"
    show-checkbox
    node-key="id"
    ref = "treeRef"
    :default-checked-keys="defKeys"
    >
    </el-tree>
  </el-form-item>
 </el-form>
  <span slot="footer" class="dialog-footer">
    <el-button @click="editdialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="editSureOk">确 定</el-button>
  </span>
</el-dialog>
      </el-card>
    </div>
  </div>
</template>

<script>
import { list, add, detail, update, remove } from '@/api/base/permissions'
import { lists } from '@/api/base/menus'
export default {
  name: 'base-permissions',
  data () {
    return {
      input: '',
      queryInfo: {
        page: 1,
        pagesize: 10,
        keyword: '',
        title: ''
      },
      checkAll: true,
      Limit: [], // 获取权限列表
      total: 0,
      editdialogVisible: false, // 编辑
      editform: {
        title: ''
      }, // 编辑数据
      addform: {
        title: '',
        permissions: []
      }, // 新增数据
      adddialogVisible: false, // 添加
      id: '',
      distribute: [], // 获取权限分配的数据
      treeProps: {
        label: 'title',
        children: 'childs'
      }, // 树形控件
      defKeys: [] // 默认选中的节点
    }
  },
  created () {
    this.getLimit()
  },
  methods: {
    async getLimit () {
      try {
        const { data } = await list(this.queryInfo)
        this.Limit = data.list
        this.total = data.counts
        // console.log(data)
      } catch (error) {
        this.$message.error('数据获取失败')
      }
    },
    // 分页
    handleSizeChange (newSize) {
      this.queryInfo.pagesize = newSize
      this.getLimit()
    },
    handleCurrentChange (newPage) {
      this.queryInfo.page = newPage
      this.getLimit()
    },
    // 重置
    reseet () {
      this.queryInfo.title = ''
    },
    // 新增
    async addLimit () {
      this.adddialogVisible = true
      try {
        const { data } = await lists()
        // console.log(data)
        // 循环，添加属性
        data.forEach((item) => {
          item.childs.forEach((item2) => {
            if (item2.points && item2.points.length) {
              item2.childs = item2.points
            }
          })
        })
        this.distribute = data
        // console.log(this.distribute)
        // console.log(data)
      } catch (error) {
        this.$message.error('失败')
      }
    },
    // 新增确定
    async sureLimit () {
      this.adddialogVisible = false
      const keys = [
        ...this.$refs.treeRef.getCheckedKeys(),
        ...this.$refs.treeRef.getHalfCheckedKeys()
      ]
      console.log(keys)
      this.addform.permissions = keys
      console.log(keys)
      try {
        const { data } = await add({
          title: this.addform.title,
          permissions: this.addform.permissions
        })
        console.log(data)
        this.getLimit()
        // this.addform.title = ''
      } catch (error) {
        this.$message.error('添加失败')
      }
      console.log(keys)
    },
    // 编辑
    async editlimit (id) {
      this.editdialogVisible = true
      this.id = id.id
      const list = {
        id: id.id,
        title: id.title,
        permissions: []
      }
      try {
        const { data } = await lists()
        const res = await detail(list)
        this.editform.title = res.data.title
        this.defKeys = res.data.permissions
        console.log(this.defKeys)
        // 循环，添加属性
        data.forEach((item) => {
          item.childs.forEach((item2) => {
            if (item2.points && item2.points.length) {
              item2.childs = item2.points
            }
          })
        })
        this.distribute = data
      } catch (error) {
        this.$message.error('失败')
      }
    },
    // 确认编辑
    async editSureOk () {
      const keys = [
        ...this.$refs.treeRef.getCheckedKeys(),
        ...this.$refs.treeRef.getHalfCheckedKeys()
      ]
      try {
        await update({
          title: this.editform.title,
          permissions: keys,
          id: this.id
        })
        this.editdialogVisible = false
        this.getLimit()
      } catch (error) {
        this.$message.error('编辑失败')
      }
    },
    // 删除
    async deleteLimit (id) {
      const res = await this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).catch(err => err)
      if (res !== 'confirm') {
        return this.$message.info('已取消操作')
      }
      // this.id = id
      console.log(id)
      const { data } = await remove({ id })
      console.log(data)
      this.getLimit()
      this.$message.success('删除成功')
    }
  }
}
</script>
<style lang="scss" scoped>
.ss {
  margin-top: 20px;
}
.el-alert {
  margin-top: 20px;
}
.sb {
  margin-bottom: 20px;
}
</style>
